<template>
  <!-- ※※※ 类名更换成对应页面名称，如列表页(list-main) ※※※ -->
  <div class="search-main">
    <!-- 通用头部 -->
    <div class="com-header">
       <div class="search-wrapper justify-align-center">
          <div class="content align-center">
               <i class="search-icon"></i>
               <form action="/bookshelf/searchDetail">
                   <input class="search-input" autocomplete="off" v-model="searchStr" name="searchStr" ref="searchinput" type="search" placeholder="请输入书名">
               </form>
               <i class="clear-icon" @click="clearData" v-if="searchStr.length"></i>
          </div>
       </div>
       <div class="cancel-btn">
           <button @click="$router.go(-1)">取消</button>
       </div>
    </div>
    <!-- 网页内容区域 -->
    <div class="view-content">
        <div class="header">搜索热词</div>
        <div class="search-content">
            <nuxt-link :to="{path:'/bookshelf/searchDetail',query:{searchStr:item.keyword}}" v-for="(item,index) in hotDataArr" :key="index">
            <button>
                {{item.keyword}}
            </button>
            </nuxt-link>
            <div class="another-wrapper">
                <span @click="getHot"><i class="another-icon"></i>换一批</span>
            </div>
        </div>
        <div class="header">搜索历史<button @click="clearHistory">清空历史</button></div>
        <div class="seacher-hitory">
            <ul>
                <li v-for="(item,index) in searchDataArray" :key="index" class="align-center">
                    <i class="search"></i><span @click="historySearch(item)">{{item}}</span><i class="delete" @click="deleteBtn(index)"></i>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
    import {Toast,Indicator} from 'mint-ui'
    import api from '~/plugins/api.js'
    import axios from 'axios'
    import storage from 'localforage'

    export default {
        head: {
            title: '搜索 - 快眼看书',
            meta: [{
                name: 'description',
                content: '快眼看书专注于小说搜索,新版快眼看书,提供最全的小说保持最快的更新,方便大家愉快地阅读小说'
            },{
                name: 'keyWords',
                content: '搜索,快眼看书'
            }]
        },
        data () {
        return {
            headerConfig: {
            showBackButton: false, // 头部返回上一页按钮
            showCompleteBtn: false,// 确定按钮是否显示
            title: '搜索'
            },
            searchStr: '',
            hotDataArr: [],
            searchDataArray: []
        }
        },
        mounted(){
            this.getHot()
            this.initData()
        },
        methods: {
            // 确定按钮监听
            async initData(evtValue) {    
                this.searchDataArray = await storage.getItem('searchDataKey') || []
            },
            clearData() {
                this.searchStr = ''
                //this.$refs.searchinput.focus()
            },
            async clearHistory() {
                await storage.removeItem('searchDataKey')
                this.searchDataArray = []
            },
            deleteBtn(i) {
                this.searchDataArray.splice(i,1)
                storage.setItem('searchDataKey',this.searchDataArray)
            },
            async getHot() {
                // Indicator.open({ spinnerType: 'triple-bounce'});
                let res = await axios.get(api.hot)
                // Indicator.close();
                if(res){
                    this.hotDataArr = res.data.data
                }
            },
            historySearch(params) {
                this.$router.push('/bookshelf/searchDetail?searchStr='+params);
            }
        }
    }
</script>
